<script lang="ts" setup>
import type { VxeGridListeners, VxeTableGridOptions } from '#/adapter/vxe-table'

import { defineEmits, ref } from 'vue'

import { Input, Modal, Tag } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getGoodsList } from '#/api/goodsPurchase'
import { indexData, indexDataModel } from '#/views/backend/batchOrdering/state'

const props = defineProps({
  openType: {
    type: String,
    required: false,
  },
})
const emit = defineEmits<EmitEvents>()
const isModalVisible = ref(false)
const selectedRecords = ref<any>([])
// 定义要发送的事件 会返回成品档案列表
type EmitEvents = {
  pushData: [data: {}]
}
const gridOptions: VxeTableGridOptions = {
  checkboxConfig: {
    highlight: true,
    trigger: 'row',
    labelField: 'name',
    reserve: true,
    showReserveStatus: true,
  },

  rowConfig: {
    // 指定唯一标识字段，确保跨页选中状态正确跟踪
    keyField: 'goods_id',
  },
  height: 500,
  columns: [
    { type: 'checkbox', width: 70, fixed: 'left' },
    { field: 'goods_no', title: '货号', width: 80 },
    { field: 'color.name', title: '颜色', width: 60 },
    { field: 'template.template_no', title: '简码', width: 120 },
    { field: 'goods_name', title: '品名', width: 140 },
    { field: 'cate_name', title: '分类', width: 180 },
    { field: 'purchase_price', title: '采购价', width: 60 },
    { field: 'time_cate_name', title: '时间分类', width: 120 },
    { field: 'style_cate_name', title: '风格', width: 170 },
    { field: 'created_at', title: '创建时间', width: 140 },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 2. 调接口
        const res = await getGoodsList({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
        })

        return { items: res.list, total: res.total }
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
}
const gridEvents: VxeGridListeners = {
  checkboxChange: ({ row }) => {
    selectedRecords.value = gridApi.grid.getCheckboxRecords()
  },
}
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions, gridEvents })

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}
/**
 * 处理推送按钮点击事件
 */
function handleOk() {
  emit('pushData', { ...selectedRecords.value[selectedRecords.value.length - 1] })

  if (selectedRecords.value.length > 1) {
    if (props.openType === 1) {
      indexData.value = selectedRecords.value
    } else if (props.openType === 2) {
      indexDataModel.value = selectedRecords.value
    }
  }
  isModalVisible.value = false
}

// 打开模态框
const openModal = () => {
  isModalVisible.value = true
}

function handleCancel() {
  isModalVisible.value = false
}

// 暴露打开模态框的方法给父组件
defineExpose({
  openModal,
})
</script>

<template>
  <Modal v-model:open="isModalVisible" title="成品列表" width="50%" @ok="handleOk" @cancel="handleCancel" ok-text="确认" cancel-text="取消">
    <Grid>
      <template #toolbar-actions>
        <template v-for="it in selectedRecords" :key="it.goods_id">
          <Tag style="margin-bottom: 5px" color="blue">{{ it.goods_no }}/{{ it.template.template_no }}</Tag>
        </template>
      </template>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="输入货号或品名" style="width: 200px; margin-right: 8px" @change="doSearch" />
      </template>
      <!-- 操作列插槽 -->
    </Grid>
  </Modal>
</template>
<style lang="scss" scoped></style>
